import { nextTick } from 'vue'
import '@/styles/loading.scss'

export const Loading = {
    start: () => {
        const bodys: Element = document.body
        const div = <HTMLElement>document.createElement('div')
        div.setAttribute('class', 'loading')
        const htmls = `
<div class="loading-box">
    <div class="loading-box-warp">
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
        <div class="loading-box-item"></div>
    </div>
</div>`
        div.innerHTML = htmls
        bodys.insertBefore(div, bodys.childNodes[0])
        window.Loading = true
    },
    // 移除 loading
    done: (time: number = 0) => {
        nextTick(() => {
            setTimeout(() => {
                window.Loading = false
                const el = <HTMLElement>document.querySelector('.loading')
                el?.parentNode?.removeChild(el)
            }, time)
        })
    },
}
